<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:head="http://www.w3.org/1999/html">
<head th:include="public/page_css::page_css ('上架')"/>
<meta charset="UTF-8"/>
<title>Title</title>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}" media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" media="all"/>

<body style="background-color: #f2f2f2;">
<div class="layui-fluid larry-wrapper">
    <div class="layui-card">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs24">
                <div class="group-button">
                    <label>上架</label>

                    <form>
                        <input type="hidden" th:value="${yqdhbdid}" id="ssyqdid" name="ssyqdid">
                    </form>
                </div>
                <div class="group-button" id="toolbar">

                    <a class="layui-btn layui-btn-sm layui-btn-normal cz-btn">
                        <i class="layui-icon">&#x1005;</i> 操作人员
                    </a>
                    <!--<a class="layui-btn layui-btn-sm layui-btn-normal edit-btn">
                        <i class="layui-icon">&#x1005;</i> 修改
                    </a>
                    <a class="layui-btn layui-btn-sm layui-btn-danger delBtn">
                        <i class="iconfont">&#xe626;</i> 启用/禁用
                    </a>-->
                    <!-- Single button -->

                </div>

                <!--列表-->
                <section class="panel panel-padding layui-card-body">
                    <div class="pro">
                        <table id="table" class="table text-nowrap" style="word-break:break-all; word-wrap:break-word;"></table>
                    </div>
                </section>


                <div class="group-button" style="float:right;margin-bottom: 10px">
                    <a class="layui-btn layui-btn-sm layui-btn-normal shelves">
                        <i class="layui-icon">&#x1005;</i> 确认上架
                    </a>
                    <a class="layui-btn layui-btn-sm layui-btn-normal closes">
                        <i class="layui-icon">&#x1005;</i> 取消
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


<div style="padding: 0px 15px;" hidden="hidden" id="operateFunction">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
                <form id="form1" class="layui-form layui-form-pane" action="">
                    &nbsp;
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>操作人员</label>
                        <div class="layui-input-block">
                            <input type="text" name="czry"  id="czry" required="required" jq-verify="required" jq-error="请输入操作人员" lay-verify="required" placeholder="操作人员" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item" style="float: right">
                        <div class="layui-input-block">
                            <button class="layui-btn" jq-filter="submit" lay-submit="" lay-filter="addCustomer">保存</button>
                            <button  class="layui-btn layui-btn-primary operateCancel">取消</button>
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>



<div style="padding: 0px 15px;" hidden="hidden" id="addfunction">

    <div class="layui-fluid larry-wrapper">
        <div class="layui-card">
            <!--  <div class="layui-row layui-col-space30">-->
            <!--<div class="layui-col-xs24">-->
            <form class="layui-form layui-card-header  layui-card-header-auto" id="tiaozhengForm">
                <div class="layui-inline">
                    <label class="layui-form-label">托盘码</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="lpn" name="lpn" readonly style="background:#eef1f6"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">货品编号</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="show_bh" name="show_bh" readonly
                               style="background:#eef1f6"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">货品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="show_mc" name="show_mc" readonly
                               style="background:#eef1f6"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">收货数量</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="sl" name="sl" readonly style="background:#eef1f6"
                               onchange="changeBtn(this)"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">生产日期</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="show_scrq" name="show_scrq" readonly
                               style="background:#eef1f6"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">批次号</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="show_hppc" name="show_hppc" readonly
                               style="background:#eef1f6"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>上架库位</label>
                    <div class="layui-input-inline">
                        <!-- <select lay-ignore="lay-ignore"  id="show_kwid" name="show_kwid"  select2 style="width: 193px" >
                         </select>-->
                        <select lay-ignore="lay-ignore" class="active" id="kwid" name="kwid" jq-verify="required"
                                lay-verify="required" style="width: 182px;"></select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>上架数量</label>
                    <div class="layui-input-inline" style=" width: 180px;">
                        <!-- <input type="number" class="layui-input" id="sjsl" name="sjsl" min="1" step="1" max="100"/>-->
                        <input type="number" class="layui-input" id="sjsl" name="sjsl" min="1" step="1"
                               onchange="changeBtn(this)" jq-verify="required" lay-verify="required"
                               required="required"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>操作人员</label>
                    <div class="layui-input-inline">

                        <input type="text" class="layui-input" id="czr" name="czr" jq-verify="required"
                               lay-verify="required" required="required" select2/>
                    </div>
                </div>

               <!-- <div class="group-button" id="button1" style="float: right; margin-top: 20px;display:block">
                    <div class="layui-input-block">
                        <button class="layui-btn confirm" jq-filter="submit" lay-submit="" lay-filter="confirmTiaozheng">确认</button>
                        <button  class="layui-btn cancel layui-btn-primary operateCancel">取消</button>
                    </div>
                </div>
                <div class="group-button" id="button2" style="float: right; margin-top: 20px;display:none">
                    <div class="layui-input-block">
                        <button class="layui-btn confirm" jq-filter="submit" lay-submit="" lay-filter="confirmTiaozheng">分配</button>
                        <button  class="layui-btn cancel layui-btn-primary operateCancel">取消</button>
                    </div>
                </div>-->
                <input type="hidden" id="gg" name="gg">
                <input type="hidden" id="kcid" name="kcid">
                <input type="hidden" id="show_kwid" name="show_kwid">
                <input type="hidden" id="parentIndex" name="parentIndex"><!--父行的索引-->
                <input type="hidden" id="ssshid" name="ssshid"> <!--收货id，唯一-->

            </form>
        </div>
         <div class="group-button" id="button1" style="float: right;display:block">
            <a class="layui-btn layui-btn-sm layui-btn-normal confirm">确认
                <i class="layui-icon">&#x1005;</i>
            </a>
            <a class="layui-btn layui-btn-sm layui-btn-normal cancel">
                <i class="layui-icon">&#x1006;</i> 取消
            </a>
        </div>
        <div class="group-button" id="button2" style="float: right;display:none">
            <a class="layui-btn layui-btn-sm layui-btn-normal confirm">
                <i class="layui-icon">&#x1005;</i> 分配
            </a>
            <a class="layui-btn layui-btn-sm layui-btn-normal cancel">
                <i class="layui-icon">&#x1006;</i> 取消
            </a>
        </div>

        <div>

        </div>

    </div>
</div>

</body>

<script type="text/javascript" th:src="@{/plugin/layui/js/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/plugin/layui/js/version.js}"></script>
<script th:src="@{/plugin/layui/js/common.js}"></script>
<div th:include="public/public_js::public_js"></div>
<style type="text/css">

</style>
<script>
    $(function () {
        console.log("我来了！！ ");
        $(".moreBtn").on("click", function () {
            $(".moreSearch").toggle();
        })
        $('#kwid').select2({
            ajax: {
                url: '/zxsdwms/wmsshelves/searchKw',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        show_kwid: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr = new Array();
                    if (data) {
                        for (var i = 0; i < data.length; i++) {
                            arr.push({id: data[i].dictionaryid, text: data[i].value});
                        }
                    }
                    // Tranforms the top-level key of the response object from 'items' to 'results'
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请输入查询字段',
            allowClear: true
        });
    });


    layui.use(['list', 'layer', 'zzpUtils', 'jquery', 'laydate'], function () {
        var zzpUtils = layui.zzpUtils,
         form = layui.form,
            $ = layui.jquery,
            laydate = layui.laydate;

        window.operateEvent = {
            "click .deleteRow": function (e, value, row, index) {//删除
                var tabledata = $table.bootstrapTable('getData');
                console.info("删除行");
                console.info(row);
                var id = [];
                id.push(row.ssshid);
                $table.bootstrapTable('remove', {field: 'ssshid', values: id});
                /*  console.info($table.bootstrapTable('getRowByUniqueId', '7e7b7da4ef1448f385582fe3e3457ac6'));*/

                console.info($table.bootstrapTable('getData')[row.parentIndex]);
                var bject = $table.bootstrapTable('getData')[row.parentIndex];
                bject.sl = parseInt(bject.sl) + parseInt(row.sl);
                $table.bootstrapTable('updateRow', {index: row.parentIndex, row: bject});
                $table.bootstrapTable('load', tabledata);

            },

            "click .editRow": function (e, value, row, index) {
                console.info("tiaozheng");
                console.info(row);
                /*zzpUtils.select2({
                 elem:"#show_kwid",
                 url:"/wmsshelves/searchKw"
                 });*/
                editDialog(row, index);
            },
            "click .jhBtn": function (e, value, row, index) {//激活
                jhBtn(row.id);
            },

        }
        window.changeBtn = function (e) {

            if ($("#sjsl").val() < $("#sl").val() || $("#sjsl").val() > $("#sl")) {
                $("#button1").hide();
                $("#button2").show();
            } else {
                $("#button1").show();
                $("#button2").hide();
            }
            if (Number($("#sjsl").val()) > Number($("#sl").val())) {
                $("#sjsl").val($("#sl").val());
            }
            if ($("#sjsl").val() == "") {
                $("#sjsl").val(1);
            }
        }


        laydate.render({
            elem: '#cjsj',
            type: 'date',
            range: '~',
            done: function (value, date, endDate) {
                var cjsj_start = value.toString().substring(0, value.toString().indexOf("~"));
                var cjsj_end = value.toString().substring(value.toString().indexOf("~") + 1);
                $("#cjsj_start").val(Date.parse(new Date(cjsj_start)));
                $("#cjsj_end").val(Date.parse(new Date(cjsj_end)));
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });
        laydate.render({
            elem: '#shsj',
            type: 'date',
            range: '~',
            done: function (value, date, endDate) {
                var shsj_start = value.toString().substring(0, value.toString().indexOf("~"));
                var shsj_end = value.toString().substring(value.toString().indexOf("~") + 1);
                $("#shsj_start").val(Date.parse(new Date(shsj_start)));
                $("#shsj_end").val(Date.parse(new Date(shsj_end)));
            }
        });

        var ind = "";
        var currentIframe = "";

        function editDialog(row, indexs) {
            ind = indexs;
            layer.open({
                type: 1,
                title: "调整",
                content: $("#addfunction"),
                area: ['950px', '350px'],
                shade: [0.4, '#393D49'],
                success: function (layero, index) {
                    currentIframe = index;
                    $("#lpn").val(row.lpn);
                    $("#show_mc").val(row.show_mc);
                    $("#show_bh").val(row.show_bh);
                    $("#sl").val(row.sl);
                    $("#show_scrq").val(row.show_scrq);
                    $("#show_hppc").val(row.show_hppc);
                    $("#show_kwid").val(row.show_kwid);
                    $("#sjsl").val(row.sl);
                    $("#sjsl").attr("max", $("#sl").val());
                    $("#czr").val(row.czr);
                    $("#gg").val(row.gg);
                    $("#kcid").val(row.kcid);
                    $("#parentIndex").val(indexs);
                    $("#ssshid").val(row.ssshid);

                }
                , yes: function (index, layero) {
                    if ($("#sl").val() > 0) {
                        $("#show_kwid").val($("#kwid").find("option:selected").text());
                        var formObject = {};
                        //自动将form表单封成json
                        var formArray = $("#tiaozhengForm").serializeArray();
                        $.each(formArray, function (i, item) {
                            formObject[item.name] = item.value;
                        });
                        //  var formJson = JSON.stringify(formObject);
                        if (formObject.sl == formObject.sjsl) {
                            $("#sl").val(formObject.sl - formObject.sjsl);
                            $table.bootstrapTable('updateRow', {index: indexs, row: formObject});
                        } else {
                            var A = JSON.parse(JSON.stringify(formObject));
                            A.sl = $("#sjsl").val();
                            A.state = "1";
                            $table.bootstrapTable('append', A);
                            var row = formObject;
                            row.sl = $("#sl").val() - $("#sjsl").val();
                            row.sjsl = "";
                            row.czr = "";
                            console.info("yu");
                            console.info(row);
                            $table.bootstrapTable('updateRow', {index: indexs, row: row});
                            $("#sl").val($("#sl").val() - $("#sjsl").val());
                        }
                        // console.info(formJson)
                    } else {
                        layer.msg("已分配完成");
                    }
                }
                , btn2: function (index, layero) {
                    layer.close(index);
                }
            })
            /* zzpUtils.dialog({
             title:"上架",
             type:2,
             content: "/wmsshelves/toShelves?id="+id,
             end: function () {//添加成功后刷新
             zzpUtils.refreshTable("#table");
             }

             });*/
        }
        //多选操作人员
        var operateIndex="";
        $(".cz-btn").click(function (e, value, row, index) {
            var arr=$table.bootstrapTable('getSelections');
            if(arr.length==0){
                layer.msg("请至少选择一条");
            }else{
                layer.open({
                    type: 1,
                    title: "生成操作人员",
                    content:  $("#operateFunction"),
                    area: ['750px', '250px'],
                    shade: [0.4, '#393D49'],
                    success: function (layero, index) {
                        operateIndex = index;
                    }
                    /*, yes: function (index, layero) {

                    }
                    , btn2: function (index, layero) {
                        layer.close(index);
                    }*/
                })
            }
        });
        //多选操作人员 表单提交
        form.on("submit(addCustomer)",function(data){
            alert("jinlaile");
           var arr=$table.bootstrapTable('getSelections');
           if(arr.length==0){
               layer.msg("请至少选择一条");
           }else {
               console.info("arr");
               alert($("#czry").val());
              for(var i=0;i<arr.length;i++){
                   arr[i].czr=$("#czry").val();
                   console.info(arr);
                   $table.bootstrapTable('updateByUniqueId', {ssshid: arr[i].ssshid, row: arr});
                   layer.close(operateIndex);
               }
           }
            return false;
        });

        //多选操作人员取消
        $(".operateCancel").click(function (e, value, row, index) {
            layer.close(operateIndex);
        });

        //调整保存


       /* form.on("submit(confirmTiaozheng)",function(data){

        })*/
        $(".confirm").click(function (e, value, row, index) {
            var flag=true;
            if ($("#kwid").val() == ""||$("#czr").val() == "") {
                flag=false;
            }
           if(flag==true){


            if ($("#sl").val() > 0) {
                $("#show_kwid").val($("#kwid").find("option:selected").text());
                var formObject = {};
                //自动将form表单封成json
                var formArray = $("#tiaozhengForm").serializeArray();
                $.each(formArray, function (i, item) {
                    formObject[item.name] = item.value;
                });
                if (formObject.sl == formObject.sjsl) {
                    formObject.state=2;
                    $("#sl").val(formObject.sl - formObject.sjsl);
                    $table.bootstrapTable('updateRow', {index: ind, row: formObject});
                    layer.close(currentIframe);
                } else {
                    var row = formObject;
                    if (Number($("#sl").val()) < Number($("#sjsl").val())) {
                        row.sjsl = $("#sl").val();
                        $table.bootstrapTable('updateRow', {index: ind, row: row});
                        layer.close(currentIframe);
                    } else {
                        var A = JSON.parse(JSON.stringify(formObject));
                        A.sl = $("#sjsl").val();
                        A.state = "1";
                        A.ssshid = Math.random().toString(36);
                        $table.bootstrapTable('append', A);
                        row.sl = $("#sl").val() - $("#sjsl").val();
                        row.sjsl = "";
                        row.czr = "";
                        row.state ="0";
                        console.info("row");
                        console.info(row);
                        console.info("row");
                        $table.bootstrapTable('updateRow', {index: ind, row: row});
                        $("#sl").val($("#sl").val() - $("#sjsl").val());
                        if (Number($("#sl").val()) <= Number($("#sjsl").val())) {
                            $("#button1").show();
                            $("#button2").hide();
                        }
                    }
                }
                // console.info(formJson)
            } else {
                layer.msg("已分配完成");
            }
           }else {
               layer.msg("请完整表单信息");
           }
        });
        //调整取消
        $(".cancel").click(function () {
            layer.close(currentIframe);
        });
        //确认上架
        $(".shelves").click(function () {
            /* alert($table.bootstrapTable('getOptions').pageNumber);*/
            var list = $table.bootstrapTable('getData');
            console.info(list);
            var flag = true;
            for (var i = 0; i < list.length; i++) {
                if (list[i].sl != list[i].sjsl) {
                    flag = false;
                    layer.alert("请仔细核对第" + (Number(i) + Number(1)) + "条数据，货品编号为：" + list[i].show_bh);
                    break;
                }
            }
            if (flag == true) {
                zzpUtils.confirm("是否确定上架", function (index) {
                    zzpUtils.action({
                        url: "/wmsshelves/add",
                        data: JSON.stringify($table.bootstrapTable('getData')),
                        success: function (data) {
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                                console.info(data);
                                top.layer.msg(data.title + "," + data.message);
                                $table.bootstrapTable('nextPage');
                                //刷新父页面
                            }, 500);
                        }, error: function (xhr, textStatus) {
                            console.log(textStatus);
                            console.log(xhr)
                        }
                    })
                })
            }

        })

        $(".closes").click(function () {
            window.close();
        })
        laydate.render({
            elem: '#test5'
            , theme: '#20a0ff'
        })
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination: true,
            uniqueId: "ssshid",
            url: '/wmsshelves/baseSelectDetail/' + $("#ssyqdid").val(),
            columns: [{
                field: '',
                checkbox: true
            }, {
                field: 'lpn',
                title: '托盘码',
                align : 'center'
            }, {
                field: 'show_bh',
                title: '货品编号',
                align : 'center'
            }, {
                field: 'show_mc',
                title: '货品名称',
                align : 'center'
            }, {
                field: 'show_hppc',
                title: '批次号',
                align : 'center'
            }, {
                field: 'show_scrq',
                title: '生产日期',
                align : 'center',
                formatter:function (value, row, index) {
                    return  value.substring(0, value.lastIndexOf("."));
                }
            }, {
                field: 'show_kwid',
                title: '上架库位',
                align : 'center'
            }, {
                field: 'sl',
                title: '收货数量',
                align : 'center'
            }, {
                field: 'sjsl',
                title: '上架数量',
                align : 'center'
            }, {
                field: 'czr',
                title: '操作人',
                align : 'center'
            }, {
                field: 'gg',
                title: '规格',
                align : 'center'
            }, {
                field: 'caozuo',
                title: '操作',
                events: operateEvent,
                formatter: operateFormatter
            }],
            queryParams: function () {//查询条件
                return zzpUtils.getFormJson($("#searchForm"));
            },
            detailFormatter: function (row, index) {
                return "这里就没有确定过11";
            }
        });


        function operateFormatter(value, row, index) {
            if (row.state == 1) {
                return [
                    /*'<a class="layui-btn layui-btn-sm layui-btn-danger" id="delBtn"><i class="iconfont">&#xe626;</i> 删除 </a>'*/
                    '<a class="layui-btn layui-btn-xs layui-btn-danger deleteRow" >删除</a>'
                ].join('')
            } else if (row.state == undefined||row.state ==0) {
                return [
                    '<a class="layui-btn layui-btn-normal  layui-btn-xs editRow">调整</a>'
                ].join('')
            } else if (row.state ==2) {
                return [
                    '<a class="layui-btn layui-btn-xs editRow">编辑</a>'
                ].join('')
            }
        }

        $(".inline-search-btn").on('click', function () {
            zzpUtils.refreshTable("#table");
        });


    });
</script>
</html>